<template>
    <div id='control'>
        <div class="scrollBar" id="scroll">
            <div class="Roll" :style="{width:jd+'%'}"></div>
        </div>
        <ul id="list" class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" :src="hash.img" @click="neih()">
                    <div class="mui-media-body" style="font-size: 13px;">
                        {{hash.audio_name}}
                        <p style="font-size:12px;" class="mui-ellipsis">{{hash.author_name}}</p>
                    </div>
                </a>
            </li>
        </ul>
        <audio :src="hash.play_url" autoplay ref="audio">
            您的浏览器不支持 audio 元素。
        </audio>
        <div style="display:flex;">
            <img @click="bf()" :src="music" alt="" srcset="" width="30" height="30">
            <img src="../assets/images/NextSong.png" alt="" srcset="" width="28" height="28" style="margin-left:18px;">
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            songInfo: '',//待定
            flag: true, //判断播放，暂停
            music: './src/assets/images/play_M.png',//播放
            music1: './src/assets/images/play_M.png',//播放
            music2: './src/assets/images/suspend_M.png',//暂停
            audioInfo: '',//待定
            timer: null, //定时器名
            Minute: '',//分钟
            second: '',//秒
            Millisecond: '',//毫秒
            lyrics: '',//歌词
            lycmsg: '',//
            jd:'',//
        }
    },
    computed: mapGetters([
        'hash',
    ]),
    watch: {
        hash: function(n, o) {
            var that = this;
            var msg = n.lyrics.split('\n');
            var lycs = [];
            msg.forEach((v, i) => {
                lycs.push({
                    time: v.replace('[', '').split(']')[0].replace('.', ':'),
                    lyc: v.replace('[', '').split(']')[1]
                });
            }, this)
            that.lyrics = lycs;
            console.log(that.lyrics);
        },
    },
    methods: {
        bf() {
            console.log(typeof this.$refs.audio.ended);
            this.flag = !this.flag;
            if (this.flag) {
                // console.log('播放');
                this.$refs.audio.play();
                this.music = this.music1
            } else {
                // console.log('暂停');
                this.$refs.audio.pause();
                this.music = this.music2;
            }
            console.log(this.$refs);
        },
        timeupdate() {//播放时间改变
            var that = this;
            console.log(that.$refs.audio.currentTime);
            that.timer = setInterval(function() {
                if (that.$refs.audio.currentTime.toFixed(2) == that.$refs.audio.duration.toFixed(2)) {
                    clearInterval(that.timer);
                    console.log('ended: ', that.$refs.audio.ended);
                    that.flag = !that.$refs.audio.ended;
                    that.music = that.music2;
                    that.$store.dispatch('emitLyc', JSON.stringify({
                        time: '',
                        lyc: '',
                    }));
                }
                else {
                    // @test
                    // console.log('currentTime: ',that.$refs.audio.currentTime.toFixed(2))
                    // console.log('duration: ',that.$refs.audio.duration.toFixed(2))
                    that.jd = (that.$refs.audio.currentTime.toFixed(2)/that.$refs.audio.duration.toFixed(2)*100).toFixed();
                    var time = that.$refs.audio.currentTime.toFixed(2);
                    var Millisecond = time.split('.')[1];//毫秒
                    var curtime = time.split('.')[0];   //剩下的秒数
                    var Minute = parseInt(curtime / 60 % 60); //分钟
                    var second = parseInt(curtime % 60);	//秒
                    Minute < 10 ? Minute = "0" + Minute : Minute;
                    second < 10 ? second = "0" + second : second;
                    var filte = that.lyrics.filter(function(v) { //过滤时间
                        return v.time == `${Minute}:${second}:${Millisecond}`
                    });
                    that.$set(that, 'lycmsg', filte);
                    if (JSON.stringify(that.lycmsg[0])) {
                        that.$store.dispatch('emitLyc', JSON.stringify(that.lycmsg[0]));
                    }
                }
            }, 0.01);
        },
        ended() {//播放结束
        },
        neih() {
            this.$router.push('/kernel');
        },
    },
    created() {
    },
    mounted() {
        var that = this;
        that.$refs.audio.addEventListener("canplay", that.timeupdate);//播放时间改变
        that.$refs.audio.addEventListener("ended", that.ended);//播放结束

    }
}
</script>
<style scoped>
#control {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    width: 100%;
    background-color: #304a63;
    display: flex;
    align-items: center;
}

#control ul {
    background-color: #304a63;
    width: 70%;
    margin-top: 3px;
}

#control .songImg {
    width: 50px;
    height: 50px;
}

#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
    background-color: transparent;
    border: 0px;
}

.scrollBar {
    width: 100%;
    height: 2px;
    background-color: #c2c2c2;
    position: absolute;
    top: 0;
    z-index: 1;
    margin-right: 10px;
}

.Roll {
    width: 0px;
    height: 2px;
    background-color: #0479db;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

